<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>租户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入姓名" clearable v-model="userName" @clear="searchUser">
                        <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
            <el-table :data="userList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="用户id" prop="id"></el-table-column>
                <el-table-column label="用户姓名" prop="username"></el-table-column>
                <el-table-column label="联系方式" prop="cellphone"></el-table-column>
                <el-table-column label="租赁状态">

                    <template slot-scope="scope">
                        <span v-text="scope.row.status1 == '0'?'未租赁':'租赁中'"></span>
                    </template>
                </el-table-column>
              <el-table-column label="用户状态">

                <template slot-scope="scope">
                  <span v-text="scope.row.status == '0'?'正常':'冻结'"></span>
                </template>
              </el-table-column>

              <el-table-column label="注册时间" prop="insertTime"></el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeUserById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[3, 6 , 12, 24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加用戶-->
        <el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%" @close="addUserFormClose">
            <el-form
                    :model="addUserForm"
                    :rules="addUserFormRules"
                    ref="addUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
              <el-form-item label="用戶名" prop="username">
                <el-input v-model="addUserForm.username"></el-input>
              </el-form-item>
              <el-form-item label="手机" prop="cellphone">
                <el-input v-model="addUserForm.cellphone"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="addUserForm.password"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="addUserForm.email"></el-input>
              </el-form-item>

              <el-form-item label="用户状态" prop="status">
                <el-select v-model="addUserForm.status" placeholder="请选择是否冻结账户">
                  <el-option label="否" :value="0"></el-option>
                  <el-option label="是" :value="1"></el-option>
                </el-select>

              </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser">确 定</el-button>
        <el-button @click="cancelAddRole">取 消</el-button>
      </span>
        </el-dialog>

        <!--修改用戶-->
        <el-dialog
                title="修改用戶"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editUserFormClose"
        >
            <el-form
                    :model="editUserForm"
                    :rules="editUserFormRules"
                    ref="editUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >

              <el-form-item label="用戶名" prop="username">
                <el-input v-model="editUserForm.username"></el-input>
              </el-form-item>
              <el-form-item label="手机" prop="cellphone">
                <el-input v-model="editUserForm.cellphone"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="editUserForm.password"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="editUserForm.email"></el-input>
              </el-form-item>

              <el-form-item label="用户状态" prop="status">
                <el-select v-model="editUserForm.status" placeholder="请选择是否锁定账户">
                  <el-option label="否" :value="0"></el-option>
                  <el-option label="是" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.prevent="editUser">确 定</el-button>
        <el-button @click="canceleditRole">取 消</el-button>
      </span>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                editDialogVisible: false,
                swflag: false,
                pageNum: 1,
                pageSize: 3,
                userList: [],
                roleList:[],
                roleIds:[], //存储选中的h角色ID
                total: 9,
                userName: "",
                addDialogVisible: false,
                addUserForm: {
                  username: "",
                  cellphone: "",
                  status:"",
                  password:"",
                  email:"",

                },
                editUserForm: {
                  id: -1,
                  username: "",
                  cellphone: "",
                  status:"",
                  password:"",
                  email:"",

                },
                editUserFormRules: {
                  username: [
                    { required: true, message: "用户名必填", trigger: "blur" },
                    { min: 3, max: 8, message: "用户名在3到8个字符之间", trigger: "blur" }
                  ],
                  cellphone: [
                    { required: true, message: "請輸入电话号", trigger: "blur" },
                    {required: true,pattern:/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/, message:"请输入符合格式的电话号" ,trigger: "blur"}
                  ],
                  status: [
                    { required: true, message: "用户状态必填", trigger: "blur" },
                  ],
                  password: [
                    { required: true, message: "密码必填", trigger: "blur" },
                    {
                      min: 3,
                      max: 8,
                      message: "用户密码在3到8个字符之间",
                      trigger: "blur"
                    }
                  ],
                  email:[
                      {required: true, message: "請輸入邮箱", trigger: "blur"},
                      {required: true,pattern:/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/, message:"请输入符合格式的邮箱" ,trigger: "blur"}
                  ],

                },
                addUserFormRules: {
                  username: [
                    { required: true, message: "用户名必填", trigger: "blur" },
                    { min: 3, max: 8, message: "用户名在3到8个字符之间", trigger: "blur" }
                  ],
                  cellphone: [
                    { required: true, message: "請輸入电话号", trigger: "blur" },
                    {required: true,pattern:/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/, message:"请输入符合格式的电话号" ,trigger: "blur"}
                  ],
                  status: [
                    { required: true, message: "用户状态必填", trigger: "blur" },
                  ],
                  password: [
                    { required: true, message: "密码必填", trigger: "blur" },
                    {
                      min: 3,
                      max: 8,
                      message: "用户密码在3到8个字符之间",
                      trigger: "blur"
                    }
                  ],
                  email:[
                    {required: true, message: "請輸入邮箱", trigger: "blur"},
                    {required: true,pattern:/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/, message:"请输入符合格式的邮箱" ,trigger: "blur"}
                  ],

                }
            };
        },
        methods: {
            getRoleNames(list){
                let info = '';
                if (list != null && list.length >0){
                    for (let r of list){
                        info += r.name +","
                    }
                }
                return info.substring(0,info.length-1) ;
            },

            showEditDialog(row) {
              this.editDialogVisible = true ;
              this.editUserForm=row;
              console.log(row);

            },

            editUser() {
              this.$refs.editUserFormRef.validate(valid=>{
                if (!valid) {
                  return;
                }
                let url = "/user/modify" ;
                this.$axios.put(url,this.editUserForm)
                    .then(res=>{
                      if (res.data.code == 200){
                        this.editDialogVisible = false;
                        this.initUser();

                        this.$message({
                          type:"success",
                          message:res.data.msg,
                          duration:1000
                        })

                      }else {
                        this.$message({
                          type:"error",
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
              })

            },
          canceleditRole(){
            this.editDialogVisible = false;
            this.initUser();
          },

            //关系管理员的对话框
            addUserFormClose() {
                this.addDialogVisible = false ;
                this.$refs.addUserFormRef.resetFields();
                this.roleIds = [];
              this.initUser();
            },
            editUserFormClose() {
              this.editDialogVisible = false ;
              this.$refs.editUserFormRef.resetFields();
              this.editUserForm.deptId = "";
              this.editUserForm.roleIds = "";
              this.initUser();
           },
            //取消添加管理员
            cancelAddRole(){
                this.addDialogVisible = false ;
                this.$refs.addUserFormRef.resetFields();
                this.roleIds = [];
              this.initUser();
            },


            searchUser() {
                /*this.initUser();*/
              let url = "/user/query";
              this.$axios.get(url,{
                params:{
                  now:this.pageNum,
                  size:this.pageSize,
                  name:this.userName
                }
              }).then(res=>{
                if(res.data.code == 200){
                  this.userList = res.data.data.list ;
                  this.pageSize = res.data.data.pageSize;
                  this.pageNum = res.data.data.pageNum ;
                  this.total = res.data.data.total ;
                }else {
                  this.$message({
                    type:'error',
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.pageNum = 1;
                this.initUser();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.initUser();
            },
          //添加管理员
          addUser() {
            this.$refs.addUserFormRef.validate(valid=> {
              if (!valid) {
                return;
              }
              let url = "/user/add";
              this.addUserForm.roleIds = this.roleIds;
              this.$axios.post(url, this.addUserForm)
                  .then(res => {
                    if (res.data.code == 200) {
                      this.addDialogVisible = false;
                      this.$refs.addUserFormRef.resetFields();
                      this.$message({
                        type:"success",
                        message:res.data.msg,
                        duration:1000
                      })
                      this.initUser();

                    } else {
                      this.$message({
                        type: 'error',
                        message: res.data.msg,
                        duration: 1000
                      })
                    }
                  })
            })
          },

          //逻辑删除
           removeUserById(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let url = "/user/del/"+id ;
              this.$axios.delete(url)
                  .then(res=>{
                    if (res.data.code == 200){
                      this.$message({
                        type:"success",
                        message:res.data.msg,
                        duration:1000
                      })
                      this.initUser();
                    }else {
                      this.$message({
                        type:"error",
                        message:res.data.msg,
                        duration:1000
                      })
                    }
                  })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });

          },
            //初始化查询 用户信息
            initUser(){
                let url = "/user/list";
                this.$axios.get(url,{
                    params:{
                        now:this.pageNum,
                        size:this.pageSize,
                        name:this.userName
                    }
                }).then(res=>{
                    if(res.data.code == 200){
                        this.userList = res.data.data.list ;
                        this.pageSize = res.data.data.pageSize;
                        this.pageNum = res.data.data.pageNum ;
                        this.total = res.data.data.total ;
                    }else {
                        this.$message({
                            type:'error',
                            message:res.data.msg,
                            duration:1000
                        })
                    }
                })
            },

        },
        created() {
            this.initUser();

        }
    };
</script>
<style lang="less" scoped>
</style>